import {View, Image, Swiper, SwiperItem, Text} from '@tarojs/components';
import ScrollPageView from 'components/ScrollPageView';
import ChooseProduct from './chooseProduct';
import {useEffect, useRef, useState} from 'react';
import s from './index.module.scss';
import FavoriteButton from './favoriteButton';
import CartButton from './cartButton';
import Taro from '@tarojs/taro';

export interface buttonPosition {
  x: number;
  y: number
}

interface cartRef {
  setButtonState(newState) : void
}

export interface PositionBasics {
  x: number;
  y: number;
}

const watchInfo = [
  {
    src:'https://www.midowatches.com/media/catalog/product/cache/aaadd316e453df5b08f7f4246fad1a9c/M/0/M021.207.11.041.00_0_front_1_1.png',
    background: '#E3EFF7',
    color: 'Blue',
    price: 175.00,
    name: 'Griffith Mesh Strap Watch',
    unit: '$',
  } ,{
    src:'https://www.midowatches.com/media/catalog/product/cache/aaadd316e453df5b08f7f4246fad1a9c/M/0/M021.207.11.031.00_0_front_1.png',
    background: '#DFDFDF',
    color: 'Silver',
    price: 504.00,
    name: 'La Roche Rose Gold Watch',
    unit: '$',
  },{
    src:'https://www.midowatches.com/media/catalog/product/cache/aaadd316e453df5b08f7f4246fad1a9c/M/0/M021.207.16.296.00_0_front_1_1.png',
    background:'#E9DCD1',
    color: 'Brown',
    price: 235.00,
    name: 'Reva Bangle Watch',
    unit: '$',
  }
]
// index页面尽量遵循所见即所得
function AddToCart() {

  const [show, setShow] = useState(false)
  const [buttonPosition, setButtonPosition] = useState<buttonPosition>({} as buttonPosition)
  const cartRef = useRef<cartRef>(null)
  const [positioningBasics, setPositioningBasics] = useState<PositionBasics>({} as PositionBasics)
  const [systemInfo, setSystemInfo] = useState<any>({})

  useEffect(() => {
    Taro.createSelectorQuery().select(`.${s.icon_wrapper}`).boundingClientRect((container: any) => {
      setPositioningBasics({x: container.left, y: container.top})
    }).exec();
    Taro.getSystemInfo({
      success: (res) => setSystemInfo(res)
    })
  }, [])
  const __buttonHandler = () => {
    cartRef.current!.setButtonState((prevState) => ({...prevState, hide: true}))
  }
  const __handleClosed = () => {
    cartRef.current!.setButtonState({toTop:false, toEnd:false, toCart:{}, toCartX:null, toCartY: null, hide: true, buttonVisible: false})
  }
  const __cartHandler = () => {
    setShow(!show)
  }
  return (
    <ScrollPageView navigation={{ title: 'watchApp' }} className='scrollPage'>
      <View className={s.main_container}>
        <Swiper
          className={s.swiper_container}
          style={{ width:`${systemInfo.screenWidth}px`, height:`${systemInfo.screenWidth}px`}}
        >
          {watchInfo.map((info) => (
            <SwiperItem className={s.swiper_item}>
              <View
                style={{background: info.background}}
                className={s.swiper_image_container}
              >
                <Image
                  style='width: 245px; height: 245px;'
                  src={info.src}
                />
              </View>
            </SwiperItem>
          ))}

        </Swiper>
        <View className={s.title_price}>
          <View className={s.title}>English Garden Leather Strap Watch Set</View>
          <View className={s.price}>
            <View className={s.original_price}>$225.00</View>
            <View className={s.discount_price}>$195.00</View>
          </View>
        </View>
        <View className={s.description}>OLIVIA BURTON</View>
        <View className={s.recommend_title}>
          <View>
            <Text className={s.recommend}>NIVACHRON™ BALANCE-SPRING</Text>
          </View>
          <View>
            <Text className={s.recommend}>Diamonds</Text>
          </View>
          <View>
            <Text className={s.recommend}>Anti-Reflective Sapphire Glass</Text>
          </View>
        </View>
        <View className={s.product_form}>
          <View className={s.product}>
            <View className={s.product_specs}>
              <View className={s.text_media_container}>
                <View className={s.text_media}>
                  <Image
                    src="https://www.midowatches.com/media/content/technical-content-block/Nivachron_1200x1200.jpg?im=Resize=(1184,887),aspect=fill"
                    style={{width: '345px', height: '345px'}}
                  />
                </View>
                <View className={s.text_media_text}>
                  <View className={s.text_media_title}>NIVACHRON™ BALANCE-SPRING</View>
                  <View className={s.text_media_description}>On a continuous effort to stay at the forefront of watchmaking expertise, Mido introduced on the development of its mechanical movements, the revolutionary Nivachron™ balance-spring. A guarantee of precision, this new titanium-based metal alloy allows to reduce the effect of magnetic fields, while offering great resistance to shocks and the effects of time.</View>
                </View>
              </View>
              <View className={s.text_media_container}>
                <View className={s.text_media}>
                  <Image
                    src="https://www.midowatches.com/media/content/technical-content-block/technical-content-block-stainless-steel.jpg?im=Resize=(1184,887),aspect=fill"
                    style={{width: '345px', height: '345px'}}
                  />
                </View>
                <View className={s.text_media_text}>
                  <View className={s.text_media_title}>Stainless steel</View>
                  <View className={s.text_media_description}>MIDO exclusively uses high-grade 316L stainless steel for its steel components to ensure complete and continued compatibility with the skin. This material resists corrosion, is unaffected by magnetic fields and demonstrates excellent durability, making MIDO’s stainless steel watches enduring creations that can stand the test of time and weather the elements. The metal’s many technical properties are complemented by its sleek, extremely pleasing aesthetics, enabling a wide range of uses.</View>
                </View>
              </View>
              <View className={s.text_media_container}>
                <View className={s.text_media}>
                  <Image
                    src="https://www.midowatches.com/media/content/technical-content-block/technical-content-block-watch-glass.jpg?im=Resize=(1184,887),aspect=fill"
                    style={{width: '345px', height: '345px'}}
                  />
                </View>
                <View className={s.text_media_text}>
                  <View className={s.text_media_title}>Watch glass</View>
                  <View className={s.text_media_description}>On a continuous effort to stay at the forefront of watchmaking expertise, Mido introduced on the development of its mechanical movements, the revolutionary Nivachron™ balance-spring. A guarantee of precision, this new titanium-based metal alloy allows to reduce the effect of magnetic fields, while offering great resistance to shocks and the effects of time.</View>
                </View>
              </View>
            </View>
          </View>
        </View>
        <View className={s.newsletter_banner}>
          <View className={s.banner_title}>
            Be inspired by MIDO
          </View>
          <View className={s.banner_content}>
            <View>Discover the latest information relating new releases, exclusive content and more.</View>
          </View>
        </View>
      </View>
      <View className={s.icon_wrapper}>
        <FavoriteButton/>
        <ChooseProduct show={show} setShow={setShow} setButtonPosition={setButtonPosition} isShowed={__buttonHandler} isClosed={__handleClosed}/>
        <CartButton setShow={setShow} positioningBasics={positioningBasics} buttonPosition={buttonPosition} ref={cartRef} onClick={__cartHandler}/>
      </View>
    </ScrollPageView>
  )
}

export default AddToCart
